
import React from 'react';
import { useParams } from 'react-router-dom';
import DownloaderForm from '../components/DownloaderForm';
import SeoHead from '../components/SeoHead';
import { useLocalization } from '../hooks/useLocalization';
import { TOOLS } from '../constants';
import { useMemo } from 'react';
import ShareButtons from '../components/ShareButtons';
import NotFoundPage from './NotFoundPage';

const ToolPage: React.FC = () => {
    const { t } = useLocalization();
    // The parameter from the router will be the tool's slug.
    const { tool: toolSlug } = useParams<{ tool: string }>();

    const toolDetails = useMemo(() => TOOLS.find(t => t.slug === toolSlug), [toolSlug]);

    if (!toolDetails) {
        // If the tool slug is invalid, show the 404 page.
        return <NotFoundPage />;
    }

    const toolName = toolDetails.name;
    const pageTitle = t(`toolpage_title`, { tool: toolName });
    const pageUrl = window.location.href;

    return (
        <>
            <SeoHead
                title={pageTitle}
                description={t(`toolpage_description`, { tool: toolName })}
                keywords={t(`toolpage_keywords`, { tool: toolName })}
            />
            <div className="py-12 sm:py-20 bg-light dark:bg-gray-900">
                <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
                    <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-dark dark:text-white leading-tight">
                        {t(`toolpage_h1`, { tool: toolName })}
                    </h1>
                    <p className="mt-4 max-w-2xl mx-auto text-lg sm:text-xl text-gray-500 dark:text-gray-300">
                        {t(`toolpage_subtitle`, { tool: toolName })}
                    </p>
                    <div className="mt-10">
                        <DownloaderForm toolName={toolName} />
                    </div>
                </div>
            </div>

            <div className="py-8 bg-light dark:bg-gray-900">
                 <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
                    <ShareButtons url={pageUrl} title={pageTitle} />
                </div>
            </div>

             <div className="py-16 bg-white dark:bg-gray-800">
                <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
                    <div className="prose dark:prose-invert lg:prose-xl mx-auto">
                        <h2>{t('about_tool_title', { tool: toolName })}</h2>
                        <p>{t(`about_tool_p1`, { tool: toolName })}</p>
                        <p>{t(`about_tool_p2`, { tool: toolName })}</p>
                        <ul>
                            <li>{t('feature_hd')}</li>
                            <li>{t('feature_fast')}</li>
                            <li>{t('feature_free')}</li>
                            <li>{t('feature_secure')}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </>
    );
};

export default ToolPage;